<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :model="queryParams" :inline="true" label-width="75px">
			<el-form-item label="用户ID：" prop="uuid">
				<el-input v-model.trim="queryParams.uuid" placeholder="请输入用户ID" maxlength="6" clearable show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model.trim="queryParams.mobile" placeholder="请输入手机号码" maxlength="11" clearable show-word-limit />
			</el-form-item>
			<el-form-item label="收支类型:" prop="types">
				<el-cascader ref="consigneeOps" v-model="queryParams.types" :options="options" @change="cascader"></el-cascader>
			</el-form-item>
			<start-end-time ref="child" title="创建日期:" :get-time="getTime"></start-end-time>
			<!--			<el-form-item label="业务类型:" prop="isOnSale">-->
			<!--				<el-select v-model="queryParams.isOnSale" placeholder="全部">-->
			<!--					<el-option :value="null" label="全部"></el-option>-->
			<!--					<el-option :value="1" label="上架"></el-option>-->
			<!--					<el-option :value="0" label="下架"></el-option>-->
			<!--				</el-select>-->
			<!--			</el-form-item>-->
		</el-form>
		<!-- <div slot="card" class="mb-[24px] flex items-center">
			<LStatisticalLeft left-name="已使用消费券" :left-value="statistics.totalSub" />
			<LStatisticalLeft left-name="实时消费券" :left-value="statistics.totalSurplus" />
		</div> -->
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
			<!--			<el-button type="primary" @click="handleExport"> 充值套餐设置 </el-button>-->
		</template>
		<el-table v-loading="loading" stripe :data="orderList">
			<el-table-column :formatter="emptyToString" type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column :formatter="emptyToString" label="用户ID" align="center" prop="uuid" />
			<el-table-column :formatter="emptyToString" label="手机号码" align="center" prop="mobile" min-width="110" />
			<el-table-column :formatter="emptyToString" label="收支类型" align="center" prop="type">
				<template slot-scope="scope">
					<div>{{ scope.row.type === '1' ? '收入' : '支出' }}</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" label="业务类型" align="center" prop="businessType" />
			<el-table-column :formatter="emptyToNumber" align="center" label="变化前消费券" min-width="120" prop="balanceBefore"> </el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="变化消费券" min-width="120" prop="amount" />
			<el-table-column :formatter="emptyToNumber" align="center" label="变化后消费券" min-width="120" prop="balance" />
			<el-table-column :formatter="emptyToString" label="备注" align="center" prop="remarks" style="min-width: 100px">
				<template slot-scope="scope">
					<div class="multi-line" style="min-width: 80px" v-text="scope.row.remarks || '-'"></div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</l-page>
</template>

<script>
import { getBalanceRecord } from '@/api/mall/topup';
import dayjs from 'dayjs';
export default {
	name: 'BalanceRecord',
	data() {
		return {
			dayjs,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 订单表格数据
			orderList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			openDetails: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				mobile: null,
				uuid: null,
				businessType: null,
				types: [],
				beginTime: null,
				endTime: null,
				date: [],
				balanceType: '消费券',
			},
			// 表单参数
			form: {},
			// 表单校验
			options: [
				{
					value: '1',
					label: '收入',
					children: [
						{ value: '代采购', label: '充值' },
						{ value: '后台代采购', label: '后台充值' },
						// { value: '砍价成功奖励余额', label: '砍价成功奖励余额' },
						// { value: '退款退货', label: '退款退货' },
						{ value: '取消订单', label: '退款' },
						{ value: '推荐充值奖励-直推', label: '推荐充值奖励-直推' },
						{ value: '推荐充值奖励-间推', label: '推荐充值奖励-间推' },
						{ value: '推荐商家奖励-直推', label: '推荐商家奖励-直推' },
						{ value: '推荐商家奖励-间推', label: '推荐商家奖励-间推' },
						{ value: '提现失败退回', label: '提现失败退回' },
					],
				},
				{
					value: '2',
					label: '支出',
					children: [
						{ value: '提现', label: '提现' },
						{ value: '使用', label: '消费券支付' },
						{ value: '后台减少', label: '后台减少' },
					],
				},
			],
			statistics: {
				totalAdd: 0,
				totalSub: 0,
				totalSurplus: 0,
			},
		};
	},
	created() {
		this.getList();
		this.getBalanceStatistics();
	},
	methods: {
		cascader(val) {
			if (Array.isArray(val)) {
				this.queryParams.businessType = val[val.length - 1];
				return;
			}
			this.queryParams.businessType = null;
		},
		getBalanceStatistics() {
			this.$request.get('/charge/mall/pc/balanceStatistics?balanceType=1').then((res) => {
				this.statistics = res.data;
			});
		},
		formatDate(row, column) {
			let cellValue = row[column.property];
			if (cellValue == null || cellValue == '') return '';
			var date = new Date(cellValue);
			var year = date.getFullYear();
			var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
		},
		/** 搜索订单列表 */
		getList() {
			this.loading = true;
			getBalanceRecord(this.queryParams)
				.then((response) => {
					this.orderList = response.data.records;
					this.total = response.data.total;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleClose() {
			this.openDetails = false;
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {};
			this.resetForm('form');
		},
		//获取时间
		getTime(startTime, endTime) {
			this.queryParams.beginTime = startTime;
			this.queryParams.endTime = endTime;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.child.resetTime();
			this.queryParams.types = [];
			this.queryParams.businessType = null;
			this.queryParams.balanceType = '消费券';
			this.resetForm('queryForm');
			this.handleQuery(false);
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加订单';
		},
		showDetails(id) {
			getOrderDetails(id).then((response) => {
				this.orderDetails = response.data;
				// if(response.data.logisticsInfo ){
				//   response.data.logisticsInfo.result.list =  response.data.logisticsInfo.result.list.reverse()
				// }
				this.logisticsInfo = response.data.logisticsInfo.result;
				this.openDetails = true;
			});
		},
		/** 编辑按钮操作 */
		handleUpdate(id) {
			getOrderDetails(id).then((response) => {
				let data = response.data;

				this.form = {
					orderSn: data.orderDetail.orderSn,
					mobile: data.userInfo.consigneePhone,
					consignee: data.userInfo.consignee,
					address: data.userInfo.address,
					id: id,
				};
				this.open = true;
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					goShip({
						id: this.form.id,
						shipChannel: this.form.shipChannel,
						shipSn: this.form.shipSn,
					}).then((res) => {
						this.msgSuccess('发货成功!');
						this.open = false;
						this.getList();
					});
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除订单编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delOrder(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有消费券记录数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					return this.$request.post('/charge/mall/pc/export', queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.content {
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 31px;
	color: #333333;
	margin-bottom: 22px;
	/*margin-top: 20px;*/
	.title {
		font-weight: bold;
		font-size: 14px;
	}
	.content-info {
		display: flex;
		margin-top: 8px;

		.info2 {
			padding-left: 23px;
			position: relative;
			::after {
				content: '';
				position: absolute;
				left: 0;
				top: 20px;
				width: 1px;
				height: 30px;
				background: #cccccc;
				opacity: 1;
			}
		}
		.info {
			width: 33.33%;
			> div {
				margin-top: 10px;
			}
		}
	}
}
</style>
